<template>
  <view class="category">
    <!-- 1  搜索框 -->
    <UgoSearch></UgoSearch>
    <!-- 1  搜索框 -->
    <!-- 2 内容 -->
    <view class="main">
      <view class="menus">
        <view
          class="item"
          :class="current === index ? 'active' : ''"
          v-for="(item, index) in leftMenus"
          :key="item"
          @click="handleMenuChoose(index)"
          >{{ item }}</view
        >
      </view>
      <view class="goods">
        <!-- 1 层循环 -->
        <view
          class="goods-group"
          v-for="item1 in rightList"
          :key="item1.cat_id"
        >
          <!-- 标题 -->
          <view class="goods-group-title">{{ item1.cat_name }}</view>
          <!-- 内容 -->
          <div class="goods-group-content">
            <navigator 
              :url="`/pages/goods_list/goods_list?cid=${item2.cat_id}`"
            v-for="item2 in item1.children" :key="item2.cat_id">
              <u-image mode="widthFix" :src="item2.cat_icon"></u-image>
              <view class="goods-title">{{ item2.cat_name }}</view>
            </navigator>
          </div>
        </view>
        <!-- 1 层循环 -->
      </view>
    </view>
    <!-- 2 内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 左侧标题
      leftMenus: [],
      // 右侧内容
      rightList: [],
      // 当前选中的标题的下标
      current: 0,

      // 存储接口的返回值   存在优化的空间 稍后再继续来补充  -  自己去感受一下 当前的页面  卡不卡！！！
      // resultList: [],   不要再data里定义过大的数据
    };
  },
  onLoad() {
    // 获取商品分类数据
    this.getCategories();
  },
  methods: {
    // 获取商品分类数据
    async getCategories() {
      console.log(222);
      const result = await this.$u.get("/categories");

      // 把接口数据存在了一个全局变量上
      this.resultList = result.message;

      // 根据大数据 拆分成左边标题用的数据
      this.leftMenus = this.resultList.map((v) => v.cat_name);
      // 根据大数据 拆分成右边内容用的数据
      this.rightList = this.resultList[0].children;
    },
    // 点击左侧标题事件
    handleMenuChoose(current) {
      this.current = current; // 设置被点击的元素的下标
      // 设置右侧显示内容 跟随发生改变
      this.rightList = this.resultList[current].children;
    },
  },
};
</script>

<style lang="scss">
.main {
  height: calc(100vh - 94rpx);
  display: flex;
  .menus {
    width: 182rpx;
    overflow: auto;
    .item {
      color: #585858;
      font-size: 28rpx;
      height: 70rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .active {
      color: red;
      position: relative;
      &::before {
        content: "";
        position: absolute;
        height: 80%;
        width: 5rpx;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        background-color: red;
      }
    }
  }
  .goods {
    flex: 1;
    overflow: auto;
    .goods-group-title {
      color: #585858;
      font-size: 28rpx;
      height: 70rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      &::before {
        content: "/";
        margin-right: 15rpx;
        color: #ccc;
      }
      &::after {
        color: #ccc;
        content: "/";
        margin-left: 15rpx;
      }
    }
    .goods-group-content {
      display: flex;
      flex-wrap: wrap;
      navigator {
        padding: 20rpx;
        width: 33.33%;
        text-align: center;
        .goods-title {
        }
      }
    }
  }
}
</style>